<template>
<el-col :span="12">
	<!--头像区域-->
	<div class="people">
		<img style="width: 88px; height: 88px;" src="../../assets/image/avator2.png" alt="" />
		<div>{{username}}</div>
		<div>{{schoolname}}</div>
	</div>
	<!--导航区域-->
  <el-menu :nique-opened="true" default-active="1" class="el-menu-vertical-demo" background-color="#ddd" text-color="#666" active-text-color="#fff">
    <router-link to="../home">
      <el-menu-item index="1">
        <i class="el-icon-location"></i>
        <span>首页</span>
      </el-menu-item>
    </router-link>
    <router-link to="../teaching">
      <el-menu-item index="2">
        <i class="el-icon-tickets"></i>
        <span>教研与教学</span>
      </el-menu-item>
    </router-link>
    <router-link to="../resources">
      <el-menu-item index="3">
        <i class="el-icon-menu"></i>
        <span slot="title">教学资源</span>
      </el-menu-item>
    </router-link>
    <router-link to="../echarts">
      <el-menu-item index="4">
        <i class="el-icon-mobile-phone"></i>
        <span slot="title">数据中心</span>
      </el-menu-item>
    </router-link>
    <router-link to ="../set">
      <el-menu-item index="5">
        <i class="el-icon-setting"></i>
        <span slot="title">设置</span>
      </el-menu-item>
    </router-link>
    <router-link to ="../feedback">
      <el-menu-item index="6">
        <i class="el-icon-edit-outline"></i>
        <span slot="title">反馈</span>
      </el-menu-item>
    </router-link>
  </el-menu>
</el-col>
</template>

<script>
	export default {
		data(){
			return {
				username:'',
				schoolname:''
			}
		},
		created(){
			//名字
      this.username = localStorage.getItem('username')
			//学校
      this.schoolname = localStorage.getItem('schoolname')

		}
	}
</script>

<style scope>
	/*头像区域*/
	.people {
		width: 200px;
		height: 180px;
		background: #fff;
		font-size: 14px;
	}
	.people img{
		padding-top: 20px;

	}
	.people div{
		height: 24px;
		line-height: 24px;
	}
	/*导航区域*/
	.el-col.el-col-12 {
		width: 12.5rem;
		height: 70%;
	}
	li.el-submenu ,li.el-menu-item ,li.el-menu-item.is-active{
    	text-align: left;
    }
    .el-menu-vertical-demo {
    	height: 100%;
    }
    element.style {
    	background-color: none;
    }
    li.el-submenu {
    	background: #00b02d !important;
    }
    li.el-menu-item{
    	background-color: #9cbf83 !important;
    	height: 50px;
    	margin-bottom: 10px;
    }
    .el-menu-item.is-active {
	   background-color: #00b02d !important;
	}
	a {
		color: #666;
		text-decoration: none;
	}
	a.router-link-exact-active.router-link-active {
		color: #fff;
	}
	li.el-menu-item {
		line-height: 50px;
	}
</style>
